<template>
    <div class="songbotton">
        <ul class="bttop">
            <li v-for="item in theicon" :key="item.icon" @click="icongai=!icongai">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="icongai===true?item.icon:item.change"></use>
                </svg>
            </li>
        </ul>
        <div class="btjdt">
            <div class="bar">
                <div class="lefttime">{{zuotime}}</div>
                <div class="huakuai" 
                @touchmove="move"
                @touchend="end"
                ref="hezi">
                    <div class="hua" :style="`left:${zuobian}px;`" @touchstart="kaishi"></div>
                    <div class="chang" :style="`width:${zuobian}px;`" ></div>
                </div>
                <div class="righttime">{{youtime}}</div>

            </div>
        </div>
        <ul class="btchange">
            <li @click="changemoshi">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href="changebf[mos]"></use>
                </svg>
            </li>
            <li @click="shangyishou">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shangyishou"></use>
                </svg>
            </li>
            <li class="zhong">
                <svg class="icon" aria-hidden="true" @click="st">
                    <use :xlink:href="this.$store.state.nowstate==true?'#icon-zanting':'#icon-bofang1'"></use>
                </svg>
            </li>
            <li @click="xiayishou">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiayishou"></use>
                </svg>
            </li>
            <li @click="xsgd">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-24gl-playlistHeart4"></use>
                </svg>
            </li>
        </ul>
    </div>
</template>
<script>
import { theicon } from "../other/other.js"
export default {
    name:"btdown",
    props:['changst',"nowt","zongt",'changx','zsc',"zhidaosong",'twoxs'],
    watch:{
        'changst'(value){
            if(value !== undefined){
                this.stchange = value.status
                if(value.nowtime + 0.5 >= value.alltime && this.dian == false){
                    if(this.mos == 0 || this.mos == 2){
                        this.xiayishou()
                    }
                }
            }
        },
        'nowt'(value){
            if(value !== undefined){
                this.zuotime = value
            }
        },
        'zongt'(value){
            if(value !== undefined){
                this.youtime = value
            }
        },
        'changx'(value){
            // console.log(value)
            if(value !== undefined){
                this.zuobian = value
            }
        },
        "zsc"(value){
            if(value!== undefined){
                this.zongde = value
            }
        },
        'zhidaosong':{
            handler(value) {
                // if(value.nowtime !== undefined){
                // console.log(value)
                this.dijishou = value.which
                this.mos = value.moshi
                // }
            },
            deep:true,
            immediate: true,
        },
        'twoxs':{
            immediate: true,
            handler(value){
                // console.log(value)
            }
        }
    },
    data(){
        return {
            theicon,
            icongai:true,
            stchange:false,
            x:0,
            zuotime:"00:00",
            youtime:"00:00",
            anxia:0,
            qilai:0,
            zuida:0,
            dian:false,
            zuobian:0,
            yidong:0,
            zongde:0,

            dijishou:0,
            mos:0,

            changebf:['#icon-xunhuanbofang','#icon-danquxunhuan','#icon-suijibofang']
        }
    },
    created(){
        document.oncontextmenu = ()=> {return false}
    },
    methods:{
        st(){
            this.$store.commit("changenowstate",!this.$store.state.nowstate)
        },
        kaishi(event){
            this.anxia = event.touches[0].pageX;
            this.dian = true;
            this.$store.commit("changenowstate",false)
        },
        move(event){
            if(this.dian){
                this.zuida = 230;
                // 右调
                if(event.touches[0].pageX - this.anxia > 0){
                    this.zuobian = event.touches[0].pageX - this.$refs.hezi.offsetLeft;
                    // 最左
                    if(this.zuobian < 0 ){
                        this.zuobian = 0;
                    }
                    // 最右
                    if(this.zuobian > this.zuida ){
                        this.zuobian = this.zuida ;
                    }
                    this.yidong = (this.zuobian / this.zuida) * this.zongde;
                }
                // 左调
                else{
                    this.zuobian = event.touches[0].pageX - this.$refs.hezi.offsetLeft
                    // 最左
                    if(this.zuobian < 0 ){
                        this.zuobian = 0;
                    }
                    // 最右
                    if(this.zuobian > this.zuida ){
                        this.zuobian = this.zuida ;
                    }
                    this.yidong = (this.zuobian / this.zuida) * this.zongde;
                }
                this.$store.commit("changenowtime",this.yidong)
                this.$store.commit("changenowstate",false)
            }
        },
        end(){
            // console.log("起来")
            this.dian = false;
            this.qilai = this.zuobian;
            this.yidong = 0
            this.$store.commit("changenowstate",true)
        },
        shangyishou(){
            this.dijishou -= 1
            if(this.zhidaosong.what == 0){
                if(this.dijishou < 0){
                    this.dijishou = this.zhidaosong.list1.length-1
                }
            }else{
                if(this.dijishou < 0){
                    this.dijishou = this.zhidaosong.list2.length-1
                }
            }
            this.$emit("jishou",this.dijishou)
        },
        xiayishou(){
            // console.log("下一首")
            this.dijishou += 1
            if(this.zhidaosong.what == 0){
                if(this.dijishou >= this.zhidaosong.list1.length){
                    // console.log("回到第一首")
                    this.dijishou = 0
                }
            }else{
                if(this.dijishou >= this.zhidaosong.list2.length){
                    // console.log("回到第一首")
                    this.dijishou = 0
                }
            }
            this.$emit("jishou",this.dijishou)
        },
        changemoshi(){
            this.mos += 1
            // console.log(this.zhidaosong.list2)
            if(this.mos >= 3){
                this.mos = 0
            }
            this.$emit("gqms",this.mos)
        },
        xsgd(){
            this.$emit("dgshow",!this.twoxs)
        }
    }
}
</script>
<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.songbotton{
    width: 100%;
    height:25%;
    // background-color: blue;
}
svg{
    color: white;
}
.bttop{
    width: 75%;
    margin: 0 auto;
    display:flex;
    justify-content: space-between;
    li{
        svg{
            font-size: 2rem;
            color:rgba(255, 255, 255, 0.7);
        }
    }
}
.btjdt{
    width: 90%;
    margin: 25px auto 0px;
    font-size: 1rem;
    .bar{
        width: 100%;
        display:flex;
        justify-content: space-between;
    }
}
.lefttime{
    color:white;
    font-size: 0.8rem;    margin-top: 2px;
}
.righttime{
    font-size: 0.8rem;    margin-top: 2px;
    color: white;
}
.huakuai{
    width: 230px;
    margin-top: 7px;
    height: 3px;
    background-color: #ffffff6e;
    position: relative;
    border-radius: 10px;
    .hua{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        transform: translate(-50%,-50%);
        background-color: #4e83f0;
        z-index: 10;
    }
    .chang{
        position: absolute;
        top: 0px;
        left:0px;
        width: 50%;
        height:3px;
        background-color: white;
    }
}
.btchange{
    width: 85%;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    li{
        svg{
            font-size: 1.8rem;
            margin-top:20px;
            color:rgba(255, 255, 255, 0.7);
        }
    }
    .zhong{
        svg{
            margin-top:0px;
            font-size: 4rem;
            color:white;
        }
    }
}
</style>